import React from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import s from './DateRangeSelector.module.css';
import DateRange from '../../../components/DateRange';

export default function DateRangeSelector({
	className,
	lastId,
	prevId,
	value,
	onChange,
}) {
	return (
		<div className={cn(className, s.dateRangeSelector)}>
			<div
				className={cn(s.speBtn, {
					[s.active]: lastId && value === lastId,
					[s.disableBtn]: !lastId,
				})}
				onClick={this.handleLastDetect}
			>
				当前监测
			</div>
			<div
				className={cn(s.speBtn, {
					[s.active]: value === prevId,
					[s.disableBtn]: !prevId,
				})}
				onClick={this.handlePrevDetect}
			>
				上一次监测
			</div>
			<DateRange
				className={s.dateRange}
				onChange={this.handleDateChange}
				value={typeof value === 'string' ? {} : value}
				showClearDates={true}
				maxDay={180}
			/>
		</div>
	);
}

DateRangeSelector.propTypes = {
	className: PropTypes.string,
};

DateRangeSelector.defaultProps = {
	className: s.dateRangeSelector,
};
